❯❯ 約束越明確，重構越自由！從 Flow 不變量到 Vibe 守則：用 E2E 測試守住重構底線

📍 流水線位置｜入口 → flow → 型別 → mock → 測試 → UI → 【vibe】 → 上線（畫線）

昨天預告了語意與樣式的邊界。但在畫下紅線前，得先講清楚：紅線內部到底給了多少自由？

在專案規範裡，已經明確切出「樣式層」的重構自主權：

🎨 自由重構區：

• 外觀與佈局： 顏色、間距、字體、Icon、Layout、動畫
• 元件型態轉換： 按鈕形式（Toolbar / Icon-only / Menu）、Modal 變更為Inline Form、列表樣式（Table / Card / List）、折疊選單
• 測試與頁面擴充： 新增 Test ID（建議以 vibe-* 開頭）、新增頁面與互動

這份清單上的項目，你想怎麼改就怎麼改，完全不用走變更審核流程。不論是把繁瑣的彈出式 Modal 改成簡潔的內嵌元件，還是把死板的 Table 換成精緻的卡片流，通通放手去做！

不過，重構再自由也有底線。只要觸碰到以下三條業務紅線， 測試就會瞬間亮起紅燈。

紅線一：業務實體，必須「看得見、認得出來」

畫面上的業務實體（例如賓客、桌次、喜餅項目），必須保有明確的領域語意。

不管你把「陳大明」這名賓客或「主桌」這個桌次，重構成多前衛的幾何卡片還是互動式平面圖節點，「陳大明」這個語意文字必須真實存在於 DOM 結構裡。

只有這樣，不論是真實使用者、螢幕閱讀器，還是背後的 E2E 測試腳本，才能在畫面上精準抓到它、驗證它。

紅線二：狀態文字，絕不能失去業務語意

「已報到」「未報到」「進行中」「待回覆」「建立成功」「已刪除」這類系統狀態文字，背後代表的就是最核心的業務邏輯。

你可以幫狀態標籤換上絕美的配色、封裝成精緻的 Pill 膠囊元件，但絕對不能把文字語意本身抽掉。

正如先前討論過的經典踩雷案例：為了追求極致簡潔，直接把「已報到」文字拔掉、只留下一個毫無標籤的綠色小點。畫面看似洗鍊了，卻讓 DOM 結構瞬間失去狀態語意。不僅 E2E 自動化測試找不到斷言目標，連無障礙（Accessibility）輔具也跟著一起失明。

紅線三：核心操作，必須「找得到、按得到」

所有業務操作，都必須保留明確的使用者觸發路徑，以及自動化腳本的尋路路徑。

你可以盡情發揮 UI 的互動形式——不論是傳統按鈕、懸浮選單、拖曳手勢，還是長按跳出的 Context Menu 都沒問題。但核心動作（例如「取消座位」）必須永遠能被定位、能被觸發。

如果重構時只顧著視覺好看，不小心把操作入口改不見了，這不叫優化 UI，這叫直接撕毀介面合約。

把上面說的整理成一張邊界地圖：

這三條紅線，究竟從何而來？

它們不是我憑空定案的，而是直接對應 Day 06 Flow 文件裡定義的 Invariant 領域不變量分類，Day 16 的 E2E 測試斷言也是拿同一套原則切下去，差別只在於 E2E 另外補上了 API Payload 的資料層驗證。

這意味著，同一份業務合約，在我們的開發生命週期中被落實了三次：

1. Flow 文件： 在需求端，定義領域不變量（Invariant）。
2. E2E 測試： 在 CI 端，進行自動化執行與硬核驗證。
3. Vibe 守則： 在重構端，為 AI 與介面迭代提供即時的行為約束。

這條邊界，從不寄望於開發人員的「自律」，而是靠測試腳本來硬核守護。重構只要踩到紅線，CI 上的測試套件就會瞬間攔截。

反過來說，自由重構區之所以能讓你放手大改，正是因為 Day 16 的測試腳本只驗證業務語意，對視覺細節保持了極高的抽象度。這張安全網只鎖死紅線，其餘空間，全是你的舞台。

拿昨天的案例實測驗驗看

回頭看 Day 18 那個視覺優化需求：把「已報到／未報到」文字標籤換成綠灰兩色點。對照剛才訂出的三條紅線：

1. 新增色彩標籤： 屬於「視覺呈現」的自由重構範疇，順利過關。
2. 拿掉文字語意： 直接硬撞「第二條紅線（狀態文字語意）」，瞬間亮紅燈。

那該怎麼解？工程上的解決方案其實非常直覺：視覺要改，語意留著。

顏色標籤照樣套用，但文字語意收進 DOM 結構或輔助標籤中（例如將文字縮小、封裝進狀態膠囊元件，或透過 aria-label / 隱藏標籤保留）。

這樣一來，既滿足了視覺設計師的審美需求，又守住了 E2E 測試與無障礙（Accessibility）的驗證鏈。

劃出明確的邊界後，UI 重構就再也不用陷入人工評估的內耗。範疇內的放心改，觸線的項目就找不破壞語意的替代方案。

約束越明確，自由越大!

明確的工程約束非但不會限制開發，反而能為系統演進提供清晰的防禦邊界與自由優化空間。在確立了 Vibe 守則的三條核心紅線後，下一篇我們將聊聊如何透過 CI/CD 管道與自動化檢核工具，把這些規範變成不需要人工盯盤的自動化守門機制（Gatekeeper）。

🎒 最小一步｜挑一個你正要視覺重構的元件，先列出不可移除的實體名稱、狀態文字與操作按鈕標籤，重構時拿這張清單當驗證依據。
📎 本篇證據｜專案 Vibe UI 守則原文（收錄於公開儲存庫 .claude/CLAUDE.md 之「Vibe UI 守則 (v2)」章節）。